<template>
    <div>
        <el-row class="home" :gutter="20">
        <el-col :span="15">
            <el-card shadow="hover">
                <div class="user">
                    <img :src="'http://localhost:9000/common/download?name='+userName.image">
                    <div class="userinfo">
                        <h3 class="name">用户名：{{userName.username}}</h3>
                        <h4 class="access">身份：{{userName.username==='admin' ? '超级管理员' : '普通员工' }}</h4>
                        <h4 class="phone">电话：{{userName.phone}}</h4>
                        <h4 class="sex">性别：{{userName.sex==="0" ? '女' : '男'}}</h4>
                    </div>
                    <el-button type="primary" @click="userupdate" round>修改个人信息</el-button>
                </div>
            </el-card>
        </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'userInfo',
    data() {
        return {
            userName: {}

        }
    },
    methods: {
        userupdate(){
            this.$router.push("/userUpdate")
        },
        usermation() {
            this.userName = JSON.parse(localStorage.getItem('userInfo'))
            console.log(JSON.parse(localStorage.getItem('userInfo')));
        }
    },
    mounted() {
        this.usermation()
    },

}
</script>

<style scoped>
img{
    width: 120px;
}
 .home {
    padding-left: 425px;
    padding-right: 10px;
}
.user {
    padding-left: 300px;
    padding-right: 10px;
}
</style>